<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>做菜养成器</title>
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- 自定义配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FF9AA2', // 可爱粉色
                        secondary: '#FFB7B2', // 浅粉色
                        accent: '#FFDAC1', // 橙色
                        light: '#E2F0CB', // 浅绿色
                        dark: '#B5EAD7', // 深绿色
                    },
                    fontFamily: {
                        sans: ['PingFang SC', 'Helvetica Neue', 'Arial', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style>
        /* 自定义样式 */
        .glass-effect {
            background: rgba(255, 255, 255, 0.25);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            border: 1px solid rgba(255, 255, 255, 0.18);
        }
        .cat-paw-tab {
            position: relative;
        }
        .cat-paw-tab::before {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 50%;
            transform: translateX(-50%);
            width: 30px;
            height: 15px;
            background-image: url('https://cdn-icons-png.flaticon.com/512/2171/2171991.png');
            background-size: contain;
            background-repeat: no-repeat;
            opacity: 0;
            transition: opacity 0.3s;
        }
        .cat-paw-tab.active::before {
            opacity: 1;
        }
    </style>
</head>
<body class="bg-gradient-to-br from-light to-accent min-h-screen">
    <!-- 内容区域 -->
    <div class="container mx-auto px-4 py-6">
        <!-- 页面内容将在这里 -->
    </div>

    <!-- 底部导航栏 -->
    <div class="fixed bottom-0 left-0 right-0 glass-effect py-2 px-4 flex justify-around items-center">
        <a href="index.html" class="cat-paw-tab flex flex-col items-center text-gray-600">
            <i class="fas fa-home text-xl"></i>
            <span class="text-xs mt-1">首页</span>
        </a>
        <a href="discover.html" class="cat-paw-tab flex flex-col items-center text-gray-600">
            <i class="fas fa-compass text-xl"></i>
            <span class="text-xs mt-1">发现</span>
        </a>
        <a href="cook.html" class="cat-paw-tab flex flex-col items-center text-gray-600">
            <i class="fas fa-utensils text-xl"></i>
            <span class="text-xs mt-1">烹饪</span>
        </a>
        <a href="profile.html" class="cat-paw-tab flex flex-col items-center text-gray-600">
            <i class="fas fa-user text-xl"></i>
            <span class="text-xs mt-1">我的</span>
        </a>
    </div>
</body>
</html> 